<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../../image/favicon.ico" sizes="16x16">
    <link rel="stylesheet" href="../../css/index.css">
    <link rel="stylesheet" href="../../css/iconfont.css">
    <link rel="stylesheet" href="../../css/login.css">
    <title>Login</title>
    <script src="../../js/jquery-3.7.1.min.js"></script>
    <script src="../../js/main.js"></script>
    <script src="../../js/login.js"></script>
</head>
<body id="body" class="login">
<div class="page" style="display: flex; justify-content: space-between; flex-direction: column;">
    <div class="mask" id="mask" style="display: none;">
        <div class="footer-info mask-main">
            <div class="mask-close"  id="mask-off">
                <span class="iconfont icon-close"></span>
            </div>
            <div class="footer-group">
                <a class="footer-nav-title" href="../gallery/gallery.html">GALLERY</a>
                <a class="footer-nav-text" href="../gallery/gallery.html">Amoy</a>
                <a class="footer-nav-text" href="../gallery/gallery-1.html">The bank of Laodao river</a>
                <a class="footer-nav-text" href="../gallery/gallery-2.html">UK</a>
            </div>
            <div class="footer-group">
                <a class="footer-nav-title" href="../collection/collection.html">COLLECTION</a>
                <a class="footer-nav-text" href="../collection/collection.html">B&W</a>
                <a class="footer-nav-text" href="../collection/collection-1.html">Architecture</a>
            </div>
            <div class="footer-group">
                <a class="footer-nav-title" href="../introduction/introduction.html">ABOUT YUK1</a>
            </div>
        </div>
    </div>
    <header>
        <div class="nav-bar long-nav">
            <div class="nav-container">
                <div class="nav-menu">
                    <a href="../../index.html"><img src="../../image/logo/logo.jpg" class="nav-icon" alt=""/></a>
                    <a href="../gallery/gallery.html" class="nav-bar-item">GALLERY</a>
                    <a href="../collection/collection.html" class="nav-bar-item">COLLECTION</a>
                </div>
                <div class="nav-side-menu" id="mask-on">
                    <span class="iconfont icon-xiaojianju"></span>
                </div>
            </div>
        </div>
    </header>
    <div class=container>
        <div class="form-container active-form" id="login-form">
            <div class="title">
                <div class="tap active">LOGIN</div>
                <div class="tap" id="to-sign">SIGN UP</div>
            </div>
            <form id="login">
                <div id="errorMsg1" class="error-msg"></div>
                <div class="form-group">
                    <label for="username">Username:</label>
                    <input type="text" id="log-username" name="username" required>
                </div>
                <div class="form-group">
                    <label for="password">Password:</label>
                    <input type="password" id="password" name="password" required>
                </div>
                <button type="submit" class="form-btn" id="login-btn">Login</button>
                <div class="text-2">Forgot your password?</div>
            </form>
        </div>

        <div class="form-container" id="register-form">
            <div class="title">
                <div class="tap active" >SIGN UP</div>
                <div class="tap" id="to-login">LOGIN</div>
            </div>
            <form id="register"> 

                <div id="errorMsg2" class="error-msg"></div>
                <div class="form-group" >
                    <label for="username">Username:</label>
                    <input type="text" id="reg-username" name="username" required>
                </div>
                <div class="form-group">
                    <label for="email">Email:</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div class="form-group">
                    <label for="password">Password:</label>
                    <input type="password" id="reg-password" name="password" required>
                </div>
                <div class="form-group">
                    <label for="confirm-password">Confirm Password:</label>
                    <input type="password" id="confirm-password" name="confirm-password" required>
                </div>
                <button type="submit" id="reg-btn" class="form-btn" >Register</button>
            </form>
        </div>



    </div>
    
    <div class=footer-info-2>
        <div class=logo-2></div>
        <div class=footer-text><a href=../introduction/introduction.html>@2023 YUK1</a></div>
    </div>
</div>
